<!-- 随堂测试进入最开始的页面 -->
<template>
	<view class="content">
		<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/improvebg.png" mode="widthFix" class="improvebg"></image>
		<view class="allScore">总分：{{info.testTotalNumber}}分</view>
		<view class="timeBox_position">
			<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/timer.png" class="timer"></image>
			<view class="text">
				<text>测试时间:</text>
				<u-count-down :time="info.testTime *60 * 1000" format="HH:mm:ss" :autoStart="false" ref="countDown"
					@change="onChange">
					<view class="time">
						<view class="time__custom">
							<text class="time__custom__item">{{ timeData.hours}}</text>
						</view>
						<text class="time__doc">:</text>
						<view class="time__custom">
							<text
								class="time__custom__item">{{ timeData.minutes>=10?timeData.minutes:'0'+timeData.minutes}}</text>
						</view>
						<text class="time__doc">:</text>
						<view class="time__custom">
							<text
								class="time__custom__item">{{timeData.seconds>=10?timeData.seconds:'0'+timeData.seconds}}</text>
						</view>
					</view>
				</u-count-down>
			</view>
		</view>
		<view class="box_position flex">
			<view class="improve_histroy start" @click="testCart">
				测验记录
			</view>
			<view class="start start_box" @click='startTest'>
				开始测验
			</view>
		</view>
	</view>
</template>

<script>
	import {
		testDetail
	} from '@/apis/apis.js'
	export default {
		data() {
			return {
				id: "",
				info: {},
				timeData: {},
			}
		},
		onLoad(options) {
			this.id = options.id
			this.init()
		},
		methods: {
			init() {
				testDetail(this.id).then(res => {
					console.log(res)
					this.info = res.data
				})
			},
			//测验记录事件
			testCart() {
				uni.navigateTo({
					url: '../records/records?id=' + this.id
				})
			},
			//开始测验
			startTest() {
				// this.$refs.countDown.start()
				uni.navigateTo({
					url: '../test/test?id=' + this.id
				})
			},
			onChange(e) {
				console.log(e)
				this.timeData = e
			}
		},
	}
</script>

<style scoped lang="scss">
	.time {
		@include flex;
		// align-items: center;
		align-items: baseline;

		&__custom {

			// /* #ifndef APP-NVUE */
			// display: flex;
			// /* #endif */
			// justify-content: center;
			// align-items: center;

			&__item {
				color: #fff;
				font-size: 34rpx;
				text-align: center;
			}
		}

		&__doc {
			// color: $u-primary;
			color: #fff;
			// padding: 0px 4px;
		}

		&__item {
			color: #606266;
			font-size: 15px;
			margin-right: 4px;
		}
	}

	.flex {
		display: flex;
	}

	.content {
		width: 100vw;

		.improvebg {

			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			width: 100vw;
			z-index: -1;
		}

		.allScore {
			color: #fff;
			font-size: 40rpx;
			position: absolute;
			top: 17vh;
			left: 34vw;
		}

		.timeBox_position {
			width: 560rpx;
			height: 74rpx;
			border-radius: 36rpx;
			background-color: #0574E7;
			display: flex;
			align-items: center;
			position: absolute;
			top: 24vh;
			left: 13vw;
			background: linear-gradient(-90deg, #0C7EED, #198FF4, #198FF4, #0C7EED);
			box-shadow: 0px 5px 10px 0px rgba(10, 105, 196, 0.2600);

			.timer {
				width: 61rpx;
				height: 61rpx;
				margin: 15rpx 0 0 84rpx;
			}

			.text {
				font-size: 34rpx;
				color: #fff;
				display: flex;
				align-items: center;

				&>text {
					padding-right: 20rpx;
				}
			}
		}

		.box_position {
			position: absolute;
			top: 82vh;
			left: 8.5vw;
			width: 83%;
			display: flex;
			justify-content: space-between;

			.improve_histroy {
				background-color: #fff;
				color: #1F99F7;
			}

			.start {
				height: 86rpx;
				border-radius: 43rpx;
				text-align: center;
				line-height: 86rpx;
				font-size: 30rpx;
				font-weight: 700;
				padding: 0 82rpx 0 81rpx;
			}

			.start_box {
				background-color: #FFC21D;
				color: #fff;
			}
		}
	}
</style>
